<!--Sets defaults-->
{% if search_result[0] %}
  {% set check_url = search_result[0].section.url %}
  {% set probability = search_result[0].probability %}
{% else %}
  {% set check_url = "None" %}
  {% set probability = "0.0" %}
{% endif %}

{% if aqa_response_in_html != "" %}
  <!--Gemini AQA template-->
  <div class="question">
    <h2>{{ question }}</h2>
  </div>
  {% if probability|float > 0.7 %}
  <div class="important-box" id="important-box">
    <b>Important:</b> The answer below is generated by Gemini 1.5.
    To verify this answer, please visit: {{named_link_html(check_url, check_url) | safe}}
  </div>
  <div class="response-text" id="tldr-response-box">
    <h3>TL;DR</h3>
    <span id="gemini-response">
      {{ md_to_html(response) | safe }}
    </span>
  </div>
  <div class="response-text" id="response-box">
    <span id="gemini-response">
      {{ md_to_html(summary_response) | safe }}
    </span>
  </div>
  <div class="related-questions">
    <h3>Suggested follow-up questions</h3>
    <span id="suggested-questions">
      {{ related_questions | safe }}
    </span>
  </div>
  <div class="hidden">
  <section class="accordion">
    <input type="checkbox" name="collapse" id="handle1">
    <h2 class="handle">
      <label for="handle1">Context</label>
    </h2>
    <div class="content" id="context-content">
      <div id="probability-box">
        <b>Answerable probability</b>: {{"%.6f"|format(probability|float)}}
      </div>
      <div id="grounding-box">
        <b>Grounding attributions</b>:
	<pre id="grounding-pre">{{ final_context | safe }}</pre>
      </div>
      <div id="reference-box">
      {% for source in search_result %}
        {% set section_url = named_link_html(source.section.url, source.section.url) %}
        <b>[{{loop.index}}]</b>{{ section_url | safe}}
        <br>
      {% endfor %}
      </div>
      <div class="hidden" id="aqa-box">
        <section class="accordion">
          <input type="checkbox" name="collapse" id="handle2">
          <h2 class="handle">
            <label for="handle2" id="aqa-label">AQA model's JSON response</label>
          </h2>
          <div class="content" id="aqa-content">
	    <pre id="aqa-json">{{ aqa_response_in_html | safe }}</pre>
          </div>
        </section>
      </div>
    </div>
  </section>
  </div>
  {% else %}
  <div class="response-text" id="response-box">
    <span id="gemini-response">
      I'm sorry, but I cannot answer this question at the moment.
      <b>The answer to your question does not seem to be available in documentation.</b><br>
      <br>
      However, based on the documentation available in the corpus, you could ask questions like:
    </span>
  </div>
  <div class="related-questions">
    <!--<h4>Suggested questions</h4>-->
    <span id="suggested-questions">
      {{ related_questions | safe }}
    </span>
  </div>
  {% endif %}
{% else %}
  <!--Gemini Pro template-->
  <div class="question">
    <h2>{{ question }}</h2>
  </div>
  <div class="important-box" id="important-box">
    <!--Uses the URL from the first result-->
    <b>Important:</b> The answer below is generated by the Gemini 1.5 model.
    To verify this answer, please visit: {{named_link_html(check_url, check_url) | safe}}
  </div>
  <div class="response-text" id="response-box">
    <span id="gemini-response">
      {{ md_to_html(response) | safe }}
    </span>
  </div>
  <div class="related-questions">
    <h4>Suggested questions</h4>
    <span id="suggested-questions">
      {{ related_questions | safe }}
    <span>
  </div>
  <div class="hidden">
  <section class="accordion">
    <input type="checkbox" name="collapse" id="handle1">
    <h2 class="handle">
      <label for="handle1">Context</label>
    </h2>
    <div class="content" id="context-content">
      <!-- {{ md_to_html(final_context) | safe }} -->
      {% for source in search_result %}
      <pre id="context-pre">{{md_to_html(source.section.content) | safe}}Reference <b>[{{loop.index}}]</b></pre>
      {% endfor %}
      <div id="reference-box-no-aqa">
      {% for source in search_result %}
        {% set section_url = named_link_html(source.section.url, source.section.url) %}
        <b>[{{loop.index}}]</b>{{ section_url | safe}} ({{ source.distance }})
        <br>
      {% endfor %}
      </div>
    </div>
  </section>
  </div>
{% endif %}

<!--Feedback buttons at the bottom of the UI display.-->
{% if feedback_mode == "rewrite" %}
<div id="rewrite-buttons-box">
  <input type="button" value="Rewrite this response" id="rewrite-button">
  <input type="button" class="notselected" value="Like this response &#128077;" id="like-button">
  {% if aqa_response_in_html != "" %}
  <span id="answerable-span">
    (<b>Answerable probability</b>: {{"%.3f"|format(probability|float)}})
  </span>
  {% endif %}
</div>
<div class="rewrite hidden" id="rewrite-box">
  <h4 id="rewrite-question-header">Question:</h4>
  <span id="rewrite-question-span">
    <p>{{ question }}</p>
  </span>
  <h4 id="rewrite-response-header">Gemini's response:</h4>
  <span id="rewrite-original-response-span">
    {{ md_to_html(response) | safe }}
  </span>
  <h4>Rewrite:</h4>
  <textarea id="edit-text-area">{{ response | safe }}</textarea>
  <br>
  <label for="user-id">User ID:</label>
  <input type="text" id="user-id" name="user-id" placeholder="Optional">
  <br>
  <span id="submit-box">
    <input type="button" value="Submit" id="submit-button">
  </span>
  <span id="submit-result">
  </span>
</div>
<div class="hidden" id="uuid-box">
  {{ uuid | safe }}
</div>
{% elif feedback_mode == "like_and_dislike" %}
<div id="feedback-buttons-box">
  <input type="button" class="notselected" value="Like this response &#128077;" id="like-button">
  <input type="button" class="notselected" value="Dislike &#128078;" id="dislike-button">
  {% if aqa_response_in_html != "" %}
  <span id="answerable-span">
    (<b>Answerable probability</b>: {{"%.3f"|format(probability|float)}})
  </span>
  {% endif %}
</div>
<div class="hidden" id="uuid-box">
  {{ uuid | safe }}
</div>
<div class="hidden" id="feedback-question-span">
  {{ question }}
</div>
<div class="hidden" id="feedback-response-span">
  {{ md_to_html(response) | safe }}
</div>
{% else %}
<div id="feedback-buttons-box">
  <input type="button" value="Provide feedback" id="feedback-button">
  <input type="button" class="notselected" value="Like this response &#128077;" id="like-button">
  {% if aqa_response_in_html != "" %}
  <span id="answerable-span">
    (<b>Answerable probability</b>: {{"%.3f"|format(probability|float)}})
  </span>
  {% endif %}
</div>
<div class="feedback hidden" id="feedback-box">
  <h4>Feedback:</h4>
  <textarea id="feedback-text-area"></textarea>
  <br>
  <label for="user-id">LDAP:</label>
  <input type="text" id="user-id" name="user-id" placeholder="Optional">
  <br>
  <span id="feedback-submit-box">
    <input type="button" value="Submit" id="feedback-submit-button">
  </span>
  <span id="feedback-submit-result">
  </span>
</div>
<div class="hidden" id="uuid-box">
  {{ uuid | safe }}
</div>
<div class="hidden" id="feedback-question-span">
  {{ question }}
</div>
<div class="hidden" id="feedback-response-span">
  {{ md_to_html(response) | safe }}
</div>
{% endif %}
